<template>
  <view class="info-page" v-if="userInfo">
    <nav-bar title="个人信息" backgroundColor="#115BAA" titleColor="#FFF"></nav-bar>
    <view
      class="info-item"
      v-for="(item, index) in userInfoConfig"
      :key="index"
      @click="clickInfoItem(item)"
    >
      <view class="label">{{ item.label }}</view>
      <view class="value-box">
        <view class="img-box" v-if="item.isImg">
          <image
            class="user-photo"
            :src="userInfo.userPhoto"
            mode="aspectFill"
          />
        </view>
        <view class="value" v-else>{{ userInfo[item.key] }}</view>
        <uni-icons v-if="item.key !== 'phoneNumber'" type="right" size="16" color="#808080"></uni-icons>
      </view>
    </view>
    <view class="proficient">
      <view class="label">我的擅长</view>
      <view class="value-box" @click="clickProficient">
        <view class="value ellipsis-text">{{ userInfo.professionalArea || '添加' }}</view>
        <uni-icons type="right" size="16" color="#808080"></uni-icons>
      </view>
    </view>
    <view class="qualification">
      <view class="label">认证</view>
      <view class="value-box" @click="clickQualification">
        <view class="value">{{ userInfo.qualification }}</view>
        <uni-icons type="right" size="16" color="#808080"></uni-icons>
      </view>
    </view>
    <view class="synopsis" @click="clickInfoItem({ label: '简介', key: 'briefText' })">
      <view class="label">
        简介
        <uni-icons class="right-icon" type="right" size="16" color="#808080"></uni-icons>
      </view>
      <view class="value">{{ userInfo.briefText }}</view>
    </view>
    <you-popup
      :popupVisible="editDialog"
      :popupTitle="`编辑${editItem.label}`"
      @popupClose="clickCancelEdit"
      @cancel="clickCancelEdit"
      @confirm="clickConfirmEdit"
    >
      <template #popupContent>
        <view class="input-content">
          <uni-easyinput
            v-if="!editItem.isImg"
            v-model="editForm[editItem.key]"
            :placeholder="placeholder"
            :type="editItem.key === 'briefText' ? 'textarea' : 'text'"
          ></uni-easyinput>
          <view v-else>
            <view v-if="editForm.userPhoto" class="input-img-box">
              <image class="user-photo" :src="editForm.userPhoto" mode="aspectFill"></image>
              <uni-icons type="clear" size="24" color="#FF513A" class="close-icon" @click="editForm.userPhoto = null"></uni-icons>
            </view>
            <uni-file-picker
              v-else
              :limit="1"
              :imageStyles="imageStyles"
              @select="uploadSelect($event)"
            >
              <uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
              <view class="desc">{{ item.desc || '点击上传' }}</view>
            </uni-file-picker>
          </view>
        </view>
      </template>
    </you-popup>
  </view>
</template>

<script>
  import { baseUrl } from '@/config'
  import api_physician from '@/api/physician.js'
  import api_login from '@/api/login.js'
  export default {
    name: 'EditUserInfo',
    data() {
      return {
        baseUrl,
        userInfoConfig: [
          { label: '头像', key: 'userPhoto', isImg: true },
          { label: '姓名', key: 'userName' },
          { label: '电话', key: 'phoneNumber' }
        ],
        userInfo: null,
        editDialog: false,
        editForm: {
          userPhoto: null,
          userName: null,
          briefText: null
        },
        placeholder: '',
        editItem: {},
        imageStyles: {
          width: 100,
					height: 100,
          border: {
            color: "#D8DCE5",
            width: '2rpx',
            style: 'dashed',
            radius: '16rpx'
          }
        }
      }
    },
    onLoad() {
      this.userInfo = uni.getStorageSync('allUserInfo')
      this.userInfo.userPhoto = this.userInfo.userPhoto ? this.userInfo.userPhoto.includes('http') ? this.userInfo.userPhoto : this.baseUrl + this.userInfo.userPhoto : ''
      this.userInfo.userPhotoList = [this.userInfo.userPhoto]
    },
    methods: {
      clickInfoItem(item) {
        this.editItem = item
        if (item.isImg) {

        } else {
          this.placeholder = '请输入' + item.label
        }
        this.editDialog = true
        this.editForm[item.key] = this.userInfo[item.key]
      },
      clickCancelEdit() {
        this.editDialog = false
        this.editForm = {
          userPhoto: null,
          userName: null,
          briefText: null
        }
      },
      uploadSelect($event) {
        const tempFiles = $event.tempFiles[0]
        uni.uploadFile({
          url: this.baseUrl + '/common/upload',
					filePath: tempFiles.path,
          name: 'file',
          header: {
            "Authorization": 'Bearer ' + uni.getStorageSync('App-Token')
          },
          // 成功函数
          success: (res) => {
            // 取到文档服务器的值
            let uploadData = JSON.parse(res.data)
            this.editForm.userPhoto = this.baseUrl + uploadData.fileName
          },
          // 失败提示用户重新上传
          fail: error => {
            console.log('失败', error)
          }
        })
        // this.editForm.userPhoto = $event.tempFilePaths[0]
        // this.editForm.userPhotoList = $event.tempFilePaths
      },
      clickConfirmEdit() {
        if (!this.editForm[this.editItem.key]) {
          uni.showToast({
            title: '请输入' + this.editItem.label,
            icon: 'none'
          })
          return
        }
        if (this.editItem.key === 'briefText') {
          this.editBriefText()
          return
        }
        const params = {
          id: this.userInfo.baUserId,
          ...this.editForm
        }
        api_physician.updateUserInfo(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '更新成功',
            icon: 'none'
          })
          api_login.fetchUserInfo().then(res => {
            if (res.code !== 200) return
            const userInfo = {
              baUserId: res.baUser.id,
              ...res.baUser,
              ...res.doctorInfo
            }
            uni.setStorageSync('allUserInfo', userInfo)
          })
          uni.reLaunch({
            url: '/pages/physicianMine'
          })
          this.editDialog = false
        })
      },
      editBriefText() {
        const params = {
          briefText: this.editForm.briefText
        }
        api_physician.updatePhysicianInfo(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '更新成功',
            icon: 'none'
          })
          api_login.fetchUserInfo().then(res => {
            if (res.code !== 200) return
            const userInfo = {
              baUserId: res.baUser.id,
              ...res.baUser,
              ...res.doctorInfo
            }
            uni.setStorageSync('allUserInfo', userInfo)
          })
          uni.reLaunch({
            url: '/pages/physicianMine'
          })
          this.editDialog = false
        })
      },
      clickProficient() {
        uni.navigateTo({
          url: '/subPages/physicianMine/myResource/myProficient'
        })
      },
      clickQualification() {
        uni.navigateTo({
          url: '/subPages/physicianMine/myResource/myQualification'
        })
      }
    }
  }
</script>
<style lang="scss">
  .info-page {
    height: 100vh;
    background-color: #F0F3F5;
    .info-item,
    .proficient,
    .qualification {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 30rpx;
      margin-bottom: 2rpx;
      background-color: #FFF;
      .label {
        font-size: 28rpx;
        font-weight: 500;
        color: #000;
      }
      .value-box {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #808080;
        .value {
          margin-right: 16rpx;
        }
        .img-box {
          width: 100rpx;
          height: 100rpx;
          margin-right: 16rpx;
          border-radius: 50rpx;
          overflow: hidden;
          .user-photo {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .proficient,
    .qualification {
      margin: 29rpx 0;
    }
    .synopsis {
      padding: 20rpx 30rpx;
      background-color: #FFF;
      .label {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right-icon {
          flex: 1;
          text-align: right;
        }
      }
      .value {
        margin-top: 12rpx;
        font-size: 24rpx;
        line-height: 32rpx;
        color: #808080;
      }
    }
  }
  .input-img-box {
    position: relative;
    width: 186rpx;
    height: 186rpx;
    margin-right: 16rpx;
    border-radius: 16rpx;
    .user-photo {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .close-icon {
      position: absolute;
      right: -12rpx;
      top: -12rpx;
    }
  }
  .input-content {
    padding: 0 30rpx 30rpx;
    display: flex;
    justify-content: center;
  }
  .uni-file-picker__container {
    display: flex;
    justify-content: center;
  }
  .file-picker__box-content {
    flex-direction: column;
  }
  .icon-del-box {
    width: 36rpx !important;
    height: 36rpx !important;
  }
  .icon-del {
    width: 20rpx !important;
  }
</style>
